{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="{% static '/denwei/js/jquery.min.js' %}"></script>
    <style>
        #container{
            margin: 20px auto;
            position: relative;
        }
        ul{
            overflow: hidden;
            width:2870px;
            position: absolute;
            left: 0;
        }
        ul li{
            list-style: none;
            float: left;
            margin-left: 10px;
            height: 500px;
            width: 400px;
        }
        ul .te{
            margin-left: 0;
        }
        img{
            height: 500px;
            width: 400px;
        }
    </style>
</head>
<body>
    <div id="container">
    <ul>
        <li class="te"><img src="{% static 'denwei/img/gongchangtupian/gc01.jpg' %}"></li>
        <li><img src="{% static 'denwei/img/gongchangtupian/gc02.jpg' %}"></li>
        <li><img src="{% static 'denwei/img/gongchangtupian/gc03.jpg' %}"></li>
        <li><img src="{% static 'denwei/img/gongchangtupian/gc04.jpg' %}"></li>
        <li><img src="{% static 'denwei/img/gongchangtupian/gc05.jpg' %}"></li>
        <li><img src="{% static 'denwei/img/gongchangtupian/gc06.jpg' %}"></li>
        <li><img src="{% static 'denwei/img/gongchangtupian/gc02.jpg' %}"></li>
        <li><img src="{% static 'denwei/img/gongchangtupian/gc01.jpg' %}"></li>
    </ul>
</div>
<script>
    function gundong() {
         var s=0;
        var set=setInterval(function () {
             s+=20;
             if(s>2860){
                clearInterval(set);
{#                $('ul').css('left',42);#}
                gundong();
            }
            $('ul').animate({left: -s+'px'}, 100);

        },100,function () {
            $('ul').animate({left: '2450px'}, 100);
        });

    }
    gundong();

</script>
</body>
</html>